<template>
	<view class="loading_container">
		<view class="loading_box">
			<image class="loader-img" src="/static/logo.png" mode=""></image>
			<view class="loader">
			    <span class="loader-text" style="--i:1">L</span>
			    <span class="loader-text" style="--i:2">o</span>
			    <span class="loader-text" style="--i:3">a</span>
			    <span class="loader-text" style="--i:4">d</span>
			    <span class="loader-text" style="--i:5">i</span>
			    <span class="loader-text" style="--i:6">n</span>
			    <span class="loader-text" style="--i:7">g</span>
			</view>
		</view>
	</view>
</template>

<script>
	
</script>

<style lang="scss" scoped>
	.loading_container{
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background-color: rgba(255,255,255,0.5);
		backdrop-filter: blur(28rpx);
		z-index: 99999;
	}
	.loading_box{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-70%);
		
		display: flex;
		flex-direction: column;
		align-items: center;
		
		
	}
	
	.loader{
	  font-size: 38rpx;
	  color: rgba(255, 255, 255, 1);
	}
	.loader .loader-text{
	  transition: all 0.5s;
	  animation: textLoading 2s infinite;
	  display: inline-block;
	  animation-delay: calc(var(--i) * 0.1s);
	}
	
	.loader-img{
		margin: 30rpx 0;
		border-radius: 30rpx;
		width: 150rpx;
		height: 150rpx;
		
		box-shadow: 10rpx 10rpx 15rpx 1rpx var(--shadow);
		
		animation-name: swinging;
		/* 引用之前定义的动画序列 */
		animation-duration: 1s;
		/* 动画持续时间为3秒 */
		animation-iteration-count: infinite;
		/* 无限循环执行动画 */
		animation-direction: alternate;
		/* 交替反向运动 */
	}
	
	@keyframes textLoading{
	  0%{
	    color: rgba(255, 255, 255, 0.1);
	    transform: translateY(0rpx);
	    margin-left: 0;
	  }
	  25%{
	    color: var(--color);
	    transform: translateY(-10rpx);
	    margin-left: 2rpx;
	    text-shadow: 0 60rpx 10rpx var(--color-s3);
	  }
	  100%{
	    color: rgba(255, 255, 255, 0.1);
	    transform: translateY(0rpx);
	    margin-left: 0;
	  }
	}
	
	//左右摇摆动画
	@keyframes swinging {
	
		/* 初始状态 */
		0% {
			transform: rotate(-5deg) scale(1);
		}
	
		/* 返回原位置 */
		100% {
			transform: rotate(5deg) scale(0.9);
		}
	}
</style>